<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增请假')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-leave-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-8">
                <input name="name" class="form-control" type="text" th:value="${@indexService.getSysUser().getUserName()}" readonly="readonly">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-8">
                <!--部门编号 隐藏-->
                <input id="treeId" name="deptId" class="form-control" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">所属组织：</label>
            <div class="col-sm-8">
                <input name="belongOrganization" id="treeName"  class="form-control" type="text" onclick="selectDeptTree()">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">请假类型：</label>
            <div class="col-sm-8">
                <select name="leaveType" class="form-control m-b" th:with="type=${@dict.getType('sys_leave_type')}">
                    <option value="">请选择请假类型</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">请假开始时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="startTime" type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd HH:mm">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">请假结束时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="endTime" type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd HH:mm">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">请假长度(/天)：</label>
            <div class="col-sm-8">
                <input name="leaveDays" id="leaveDays" class="form-control" type="text" readonly="readonly">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">请假说明：</label>
            <div class="col-sm-8">
                <input name="leaveDetail" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">附件地址：</label>
            <div class="col-sm-8">
                <input type="hidden" name="fujianAddress">
                <div class="file-loading">
                    <input class="form-control file-upload" id="fujianAddress" name="file" type="file">
                </div>
            </div>
        </div>
        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label">请假审批状态：</label>-->
            <!--<div class="col-sm-8">-->
                <!--<div class="radio-box" th:each="dict : ${@dict.getType('sys_approval_status')}">-->
                    <!--<input type="radio" th:id="${'leaveStatus_' + dict.dictCode}" name="leaveStatus" th:value="${dict.dictValue}" th:checked="${dict.default}">-->
                    <!--<label th:for="${'leaveStatus_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label">用户编号：</label>-->
            <!--<div class="col-sm-8">-->
                <!--<input name="userId" class="form-control" type="text">-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="form-group">-->
            <!--<label class="col-sm-3 control-label">租户id：</label>-->
            <!--<div class="col-sm-8">-->
                <!--<input name="tenantId" class="form-control" type="text">-->
            <!--</div>-->
        <!--</div>-->
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
</body>
<script th:inline="javascript">
    var prefix = ctx + "system/leave"
    $("#form-leave-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-leave-add').serialize());
        }
    }

    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })

    /* 用户管理-修改-选择部门树 */
    function selectDeptTree() {
        console.log("部门树")
        var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
        $("#deptId").val(deptId);
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "350",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }



    var date1 = new Date();
    var date2 = new Date(date1);
    date2.setDate(date1.getDate() + 10);


    // $("#datetimepicker-startTime").datetimepicker({
    //     format: 'yyyy-mm-dd hh:ii',
    //     minView: "month",
    //     todayBtn:  true,
    //     autoclose: true,
    //     //只能请近七天内的假
    //     startDate : new Date(),
    // }).on('changeDate', function(event) {
    //     event.preventDefault();
    //     event.stopPropagation();
    //     var startTime = event.date;
    //     $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
    //     $('#datetimepicker-endTime').datetimepicker('setEndDate', date2);
    // });
    $("#datetimepicker-startTime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        todayBtn:  true,
        autoclose: true,
    }).on('changeDate', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var startTime = event.date;
        $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
        $('#datetimepicker-endTime').datetimepicker('setEndDate', date2);


        var time1 = $('#datetimepicker-startTime').val()
        var time2 = $('#datetimepicker-endTime').val()
        var timesss = DateMinus(time1, time2);
        $("#leaveDays").val(timesss);
    });


    $("#datetimepicker-endTime").datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        todayBtn:  true,
        autoclose: true,
        endTime: new Date(new Date() + 1000 * 60 * 60 * 24 * 10),
    }).on('changeDate', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var endTime = event.date;
        $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);


        var time1 = $('#datetimepicker-startTime').val()
        var time2 = $('#datetimepicker-endTime').val()
        var timesss = DateMinus(time1, time2);
        $("#leaveDays").val(timesss);
    });

    function DateMinus(date1,date2){//date1:小日期   date2:大日期
        var sdate = new Date(date1);
        var now = new Date(date2);
        var days = now.getTime() - sdate.getTime();
        var day = Math.ceil(days / (1000 * 60 * 60 * 24) * 100) / 100;
        if (day <= 0.125){
            day = 0.125;
        }
        return day;
    }

</script>
</html>